<template>
  <div class="side-bar">
    <span><BiTelephoneFill></BiTelephoneFill></span>
    <span class="el-icon-chat-dot-round"><IonLogoWechat></IonLogoWechat></span>
    <span class="el-icon-s-custom"><MdiQqchat></MdiQqchat></span>
    <transition name="slide">
      <span class="el-icon-s-custom" @click="GoTop" v-show="isTop"><MdiRocketLaunch></MdiRocketLaunch></span>
    </transition>

  </div>
</template>
<script lang="ts">export default { name: 'BackTop' }</script>
<script setup lang="ts">
  import BiTelephoneFill from '~icons/bi/telephone-fill'
  import IonLogoWechat from '~icons/ion/logo-wechat'
  import MdiQqchat from '~icons/mdi/qqchat'
  import MdiRocketLaunch from '~icons/mdi/rocket-launch'

  const isTop = ref(false)
  let handleScroll

  const GoTop = () => {
    (function smoothscroll() {
      const currentScroll = document.documentElement.scrollTop || document.body.scrollTop
      if (currentScroll > 0) {
        window.requestAnimationFrame(smoothscroll)
        window.scrollTo(0, currentScroll - currentScroll / 10)
      }
    })()
  }

  onMounted(() => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    if (scrollTop > 40) {
      isTop.value = true
    }

    handleScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 40) {
        isTop.value = true
      } else {
        isTop.value = false
      }
    }

    window.addEventListener('scroll', handleScroll)
  })

  onUnmounted(() => {
    handleScroll && window.removeEventListener('scroll', handleScroll)
  })
</script>

<style lang="less" scoped>
  .side-bar {
    position: fixed;
    right: 0;
    bottom: 10%;
    transform: translateY(-50%);
    z-index: 888;

    > span {
    @apply flex-center;
      background: #434343;
      cursor: pointer;
      width: 50px;
      height: 50px;
      color: #FFF;
      display: block;
      position: relative;
      right: 0;
      margin: 5px 0 0;
      font-size: 19px;
      line-height: 50px;
      transition: all 0.3ms;
    }
  }

  .slide-enter-active,
  .slide-leave-active {
    transition: all 1s;
  }

  .slide-enter,
  .slide-leave-to {
    height: 0;
  }

</style>
